<!DOCTYPE html>
<html>
@@include('template/head.html', {"title": "填写信息","csspath": "css/style.css"})

<body>
    <div class="container">
        <header class="header">
            <a href="index.html" class="link left">
                <span class="icon icon-home"></span>
            </a>
            <div class="center">
                填写信息
            </div>
            <span class="right"></span>
        </header>
        <main class="main">
            <div class="cell-list">
                <div class="cell">
                    <span class="text"><i class="icon icon-check font-orange"></i>&nbsp;您将要兑换的是：农家土鸡蛋</span>
                </div>
            </div>

            <div class="cell-list field-list has-border">
                <p class="tip">请详细填写您的信息，以便我们与您取得联系</p>
                <form action="order.html" class="js-validate">
                    <ul>
                        <li>
                            <div class="field">
                                <label class="label" for="username">姓名：</label>
                                <input type="text" class="input" id="username" placeholder="请填写您的姓名" data-validate="empty" data-label="姓名">
                            </div>
                        </li>
                        <li>
                            <div class="field">
                                <label class="label" for="phone">手机号：</label>
                                <input type="text" class="input" id="phone" placeholder="请填写您的手机" data-validate="empty,phone" data-label="手机号">
                            </div>
                        </li>
                        <li>
                            <div class="field">
                                <label class="label" for="postcode">邮编：</label>
                                <input type="text" class="input" id="postcode" placeholder="请填写邮编" data-validate="" data-label="邮编">
                            </div>
                        </li>
                        <li>
                            <div class="field">
                                <label class="label" for="city">选择地区：</label>
                                <input type="text" class="input" id="city" placeholder="请选择地区" data-validate="empty" data-label="地区">
                            </div>
                        </li>
                        <li>
                            <div class="field  textarea">
                                <textarea class="content" row="3" id="memo" placeholder="请详细填写您的地址" data-validate="empty" data-label="详细地址"></textarea>
                            </div>
                        </li>
                    </ul>
                    <button type="button" class="btn btn-full btn-orange" id="submitForm">提交</button>
                </form>
            </div>
        </main>
        <footer>

        </footer>
    </div>
    <script src="js/rem.js"></script>
    <script src="js/zepto.min.js"></script>
    <script src="js/cityData.js"></script>
    <script src="js/script.js"></script>
    <script>
        $('#submitForm').click(function() {
            $form = $(".js-validate").validate();
            $form.validate();
            var checkResult = $form.getResult();
            var loading;
            if (checkResult) {
                $.ajax({
                    type: 'POST',
                    url: "/ExChange/Submit",
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    beforeSend: function() {
                        $('#submitForm').attr('disabled', 'disabled');
                        loading = $.Toast({
                            position: "center",
                            content: '<div class="spinner"><div class="point"></div>请稍候...</div>',
                            duration: "99999999" // 存在时间 默认3000
                        });
                    },
                    data: $("#exForm").serialize(),
                    dataType: "json",
                    success: function(data) {
                        loading.close();
                        if (data && data.code == "200") {
                            location.href = "/ExChange/order/" + data.id;
                        } else {
                            $.Toast({
                                position: "center",
                                content: data.message // 存在内容
                            });
                        }
                    }
                });
            }
        })
        $("#city").picker({
            data: cityData,
            text: "name",
            value: "name",
            list: "sub",
        });

        $("#city").data("picker").setValue("广东 - 广州 - 天河区");
    </script>
</body>

</html>